<template>
  <fragment>
    <template v-for="(itemss, indexss) in menuData">
      <!-- 一级菜单 -->
      <el-submenu
        :index="itemss.path + ''"
        :key="indexss"
        v-if="
          itemss.isShow == 1 && itemss.children && itemss.children.length > 0
        "
      >
        <!-- 一级菜单标题 -->
        <template slot="title">
          <i :class="itemss.icon"></i>
          <span slot="title">{{ itemss.name }}</span>
        </template>
        <template v-for="(term, indext) in itemss.children">
          <!-- 二级菜单没有子路由的时候 -->
          <el-menu-item
            :key="term.path + '' + term.name"
            :index="term.path + ''"
            v-if="
              term.isShow == 1 &&
              term.children &&
              term.children.length > 0 &&
              itemss.type < 3
            "
            :class="$route.path === term.path ? 'is-active' : ''"
          >
            <i :class="term.icon"></i>
            <span slot="title">{{ term.name }}</span>
          </el-menu-item>
          <!-- 二级菜单有子路由的时候,递归循环自身 -->
          <MenuNav v-else :key="indext" :menuData="[...term]"></MenuNav>
        </template>
      </el-submenu>
      <el-menu-item
        :key="indexss"
        :index="itemss.path + ''"
        v-if="
          itemss.isShow == 1 && itemss.children && itemss.children.length == 0
        "
        :class="$route.path === itemss.path ? 'is-active' : ''"
      >
        <i :class="itemss.icon"></i>
        <span slot="title">{{ itemss.name }}</span>
      </el-menu-item>
    </template>
  </fragment>
</template>

<script>
export default {
  name: "MenuNav",
  props: ["menuData"],
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    // console.log(this.menuData);
  },
  destroyed() {},
  methods: {},
};
</script>
<style lang='scss' scoped>
//@import path(); 引入公共css类
</style>
